<!--         1. #right='obj' 
             2. v-slot:name ='obj'
             3. slot='right'  slot-scope = 'obj'  -->

  <!-- <SlotTable :list="list2">
    <template v-slot:look='obj'>
     {{obj.sok.id}}<button>查看</button> 
     <button @click="del(obj.sok.id)">删除</button>
    </template>
  </SlotTable> -->

      <!-- 对话框组件 -->
<template>
  <div>
    <!-- 御剑乘风来,除魔天地间!
    <button @click="flag=!flag">按钮==app</button>
    <hr /> -->
    <SlotTable :list="list" v-if="flag">
      <!-- <template #look="{row}"> -->
      <!-- <template v-slot:look="{row}"> -->
      <template slot="look" slot-scope="{row}">
        {{ row.id}}
        <button @click="lookHandle(row)">查看</button>
        <button @click="del(row.id)">删除</button>
        <button @click="adds(row)">添加</button>
      </template>
    </SlotTable>

    <!-- <SlotTable :list="list2">
      <template #look="{row}">
        {{ row.id}}
        <button @click="del2(row.id)">删除</button>
      </template>
    </SlotTable>-->

    <!-- 对话框组件
    1、封装对话框显示和隐藏
    2、优化对话框、结构和布局
    -->
    <Dialog :showFlag.sync="showFlag" title="编辑数据">
      <template>
      <form>
        姓名:
        <input type="text" v-model="formDate.name" />
        <br />年龄:
        <input type="text" v-model="formDate.age" />
      </form>
       <div>
       <button @click="cancel">取消</button>
       <button @click="submit">确认</button>
       </div>
       </template>
    </Dialog>
  </div>
</template>
<script>
import SlotTable from './slotTable/SlotTable.vue'
import Dialog from './slotTable/DiaLog.vue'
export default {
  name: '',
  components: {
    SlotTable,
    Dialog
  },
  data () {
    return {
      flag: true,
      showFlag: false,
       formDate:{
          name:'',
          age:''
      },
      list: [
        {
          id: 1,
          name: '赵小云',
          age: 19
        },
        {
          id: 2,
          name: '张小花',
          age: 29
        },
        {
          id: 3,
          name: '孙大明',
          age: 39
        }
      ],
    }
  },
  // beforeCreate () {
  //   console.log('beforeCreate===父');
  // },
  // created () {
  //   console.log('created===父');
  // },
  // beforeMount () {
  //   console.log('beforeMount===父');
  // },
  // mounted () {
  //   console.log('mounted===父');
  // },
  // beforeUpdate () {
  //   console.log('beforeUpdate===父');
  // },
  // updated () {
  //   console.log('updated===父');
  // },
  // beforeDestroy () {
  //   console.log('beforeDestroy===父');
  // },
  // destroyed () {
  //   console.log('destroyed===父');
  // },
  computed: {
  },
  methods: {
    del (id) {
      console.log(id);
      this.list = this.list.filter(item => item.id != id)
    },
    // del2 (id) {
    //   this.list2 = this.list2.filter(item => item.id != id)
    // },
    /* 点击显示对话框 */
    lookHandle (res) {
      console.log(res
      )
      this.formDate = JSON.parse(JSON.stringify(res))
      this.showFlag = true
      // this.formDate = res
    },
    cancel(){
      this.showFlag=false
    },
    submit(){
      var obj = this.list.find(item => item.id ==this.formDate.id)
     obj.name = this.formDate.name
     obj.age = this.formDate.age
     /* 2.关闭对话框 */
       this.showFlag = false
       /* 3.清空表单 */
       this.formDate={
        name:'',
        age:''
       } 
  },
   adds(){
        
       }
  }
}
</script>
<style lang='less'  scoped>
</style>